<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单的及时编辑</title>	
</head>
	
<body>
	标题：<input type="text" id="title"><br/>
	内容：<input type="text" id="content"><br/>
	作者：<input type="text" id="author"><br/>
	<button id="btn">保存</button>
	<table id="list" border=1>
		<tr>
			<th>ID</th><th>帖子名称</th><th>内容预览</th><th>发布时间</th><th>作者</th><th>操作</th>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td name="option"><a name="detail" href="#">详细信息</a> <a class="delbtn" href="#">删除1</a></td>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td><a name="detail" href="#">详细信息</a> <a class="delbtn" href="#">删除2</a></td>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td><a name="detail" href="#">详细信息</a> <a class="delbtn" href="#">删除3</a></td>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td><a name="detail" href="#">详细信息</a> <a class="delbtn" href="#">删除4</a></td>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td><a name="detail" href="#">详细信息</a> <a class="delbtn" href="#">删除5</a></td>
		</tr>
		<tr>
			<td>25</td><td class="title">ABC</td><td>xxxxxxxx....</td><td>2016-04-15</td><td>YT</td><td><a name="detail" href="#">详细信息</a><a class="delbtn" href="#">删除6</a></td>
		</tr>
	<table>
</body>
	
</html>
<script src="pool.js"></script>
<script>
window.onload = function(){
	var title = document.getElementById("title");
	var content = document.getElementById("content");
	var oauthor = document.getElementById("author");
	var oBtn = document.getElementById("btn");
	var oList = document.getElementById("list");
	oBtn.onclick = function(){
		var d = new Date()
		var titleVal = title.value;
		var contentVal = content.value;
		var oauthorVal = oauthor.value;
		if (oList.children[0].children[1]) {
			var tr = oList.children[0].children[1].cloneNode(true);
			var child = tr.children;
			child[0].innerHTML = random1Num(0,100);
			child[1].innerHTML = titleVal;
			child[2].innerHTML = contentVal;
			child[3].innerHTML	= date2String(d)
			child[4].innerHTML	= oauthorVal;
			oList.appendChild(tr);
		}else{
			var tr = oList.children[0].children[0].cloneNode(true);
			var child = tr.children;
			child[0].innerHTML = random1Num(0,100);
			child[1].innerHTML = titleVal;
			child[2].innerHTML = contentVal;
			child[3].innerHTML	= date2String(d)
			child[4].innerHTML	= oauthorVal;
			child[5].innerHTML	= ""+"<a name='detail' href='#''>详细信息</a><a class='delbtn' href='#'>删除1</a>";
			oList.appendChild(tr);
		}
	}
	oList.onclick = function(e){
		var e = e||event;
		var target = e.target||e.srcElement;
		if(target.tagName=="A"&&target.className=="delbtn"){
			target.parentNode.parentNode.remove()
		}

		if(target.tagName=="TD"){
			var input = document.createElement("input");
			input.type="text";
			input.value = target.innerHTML;
			target.replaceChild(input,target.firstChild);
			input.onblur = function(){
				this.parentNode.innerHTML = this.value;
			}
		}
	}		
}
</script>